<template>
  <view class="container">
    <view v-if="okSpForm.length > 0" style="margin-top: 15px; padding: 20px">
      <view
        v-for="(item, index) in okSpForm"
        :key="index"
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 10px;
          padding: 10px 20px;
          border: 1rpx solid #ccc;
          border-radius: 5px;
          background-color: #fff;
        "
      >
        <view style="display: flex; align-items: center; justify-content: space-between">
          <image style="width: 120rpx; height: 120rpx; border-radius: 50%" :src="imgurl + item.avatar"> </image>
          <view style="font-weight: bold; margin-left: 40rpx">{{ hideMiddleDigits(item.account) }}</view>
        </view>
        <!-- <view>
          <view style="font-size: 14px; color: #333; margin-bottom: 5px">消费</view>
          <view style="font-size: 14px; color: red">返利</view>
        </view> -->
      </view>
    </view>
  </view>
</template>

<script>
import { getMerInviteUserList } from '../../utils/merorder/mer';
import {IMG_URL} from '../../config/index.js'
export default {
  data() {
    return {
      okSpForm: [],
      imgurl: IMG_URL
    };
  },
  onLoad() {
    const ebMerId = uni.getStorageSync('merId');
    getMerInviteUserList({ ebMerId: ebMerId }).then((res) => {
      if (res.code === 200) {
        this.okSpForm = res.rows;
        console.log('🚀 ~ getMerInviteUserList ~ this.okSpForm :', this.okSpForm);
      }
    });
  },
  methods: {
    hideMiddleDigits(phoneNumber) {
      if (!phoneNumber || phoneNumber.length !== 11) return phoneNumber;
      return phoneNumber.slice(0, 3) + '****' + phoneNumber.slice(7);
    }
  }
};
</script>

<style scoped></style>
